<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>example</title>
  <script
    type="text/javascript"
    src="https://unpkg.zhimg.com/vue@2.6.12/dist/vue.js"
  ></script>
  <!-- 引入样式 -->
  <link
    rel="stylesheet"
    href="https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css"
  />
  <!-- 引入组件库 -->
  <script src="https://unpkg.zhimg.com/element-ui@2.15.6/lib/index.js"></script>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.6/ace.js"></script>
  <script type="text/javascript" src="../dist/tn-element-ui.js"></script>
  <style>
    body, html {
      margin: 0;
    }
    #innerPage {
      width: 100%;
      height: 100%;
      border: none;
    }
    .el-submenu.is-active > .el-submenu__title {
      color: #ffd04b!important;
    }
    .editor-btn-switch{
      position: fixed;
      top: 16px;
      right: 26px;
      z-index: 999;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-button
      class="editor-btn-switch"
      type="info"
      plain
      size="small"
      :icon="editorVisible ? 'el-icon-back' : 'el-icon-right'"
      @click="editorVisible = !editorVisible"
    >{{ editorVisible ? '隐藏源码' : '源码' }}</el-button>
    <!-- content-wrapper edit-container -->
    <tn-h-box class="tn-absolute-fit tn-flex-box">
      <el-menu
        :default-active="defaultActive"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="width: 230px;"
        @select="handleSelect">
        <template v-for="(value, key) in exampleConfig">
          <el-menu-item v-if="!value.children" :key="key" :index="value.fileName">
            <template slot="title">{{ value.name }}</template>
          </el-menu-item>
          <el-submenu v-else :index="key" :key="key">
            <template slot="title">{{ value.name }}</template>
            <el-menu-item v-for="(item) in value.children" :key="item.name" :index="item.fileName">
              <template slot="title">{{ item.name }}</template>
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
      <tn-v-box v-show="editorVisible" size="600px">
        <div bordered>
          <tn-h-box cellspacing align-items="center">
            <div>源代码编辑器</div>
            <tn-space></tn-space>
            <el-button
              size="small"
              type="primary"
              plain
              icon="el-icon-refresh-left"
              @click="refresh"
            >重置</el-button>
            <el-button
              size="small"
              type="primary"
              @click="run"
              icon="el-icon-video-play"
            >运行</el-button>
          </tn-h-box>
        </div>
        <div size="1">
          <div id="editor" class="tn-absolute-fit">
          </div>
        </div>
      </tn-v-box>
      <div size="1" id="previewPane">
        <!--<iframe id='innerPage' name='innerPage'></iframe>-->
      </div>
    </tn-h-box>
  </div>

  <script src="./js/editor.js"></script>
  <script src="./config.js"></script>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data () {
        return {
          exampleConfig,
          defaultActive: 'tn-eltable',
          editorVisible: false
        }
      },
      methods: {
        run () {
          editor.run()
        },
        refresh () {
          editor.refresh()
        },
        handleSelect (fileName) {
          window.location.hash = `#${fileName}`
          editor.initPage()
        },
      },
      mounted () {
        window.location.hash = `#${this.defaultActive}`
        editor.initPage()
      }
    })
  </script>
</body>
</html>
